<template>
  <div class="banner-header">
    <div class="header">
      <el-row :gutter="20" class="header-inner-row">
        <el-col :span="9" :offset="3">
          <div class="logo">
            <img :src="logo" class="logo-img" />
            <div class="logo-title">{{logoTitle}}</div>
          </div>
        </el-col>
        <el-col :span="9" :style="{'display': 'flex','flex-direction': 'row-reverse'}">
          <el-menu
            :default-active="0"
            mode="horizontal"
            background-color="transparent"
            text-color="#fff"
          >
            <el-menu-item index="3">
              <el-badge :value="3">
                <i class="el-icon-chat-dot-round"></i>
              </el-badge>
            </el-menu-item>
            <el-menu-item index="1">
              <i class="el-icon-setting"></i>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-switch-button"></i>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
        <div class="item active"></div>
      </div>
    </div>
  </div>
</template>
<script>
import Logo from "@/assets/logo.png";
import "./style.less";
export default {
  name: "HeaderBanner",
  data() {
    return {
      logo: Logo,
      logoTitle: "天堰统一信息门户"
    };
  }
};
</script>